import React,{useState} from 'react'
import '../static/less/register.less'
import { Link,useNavigate } from 'react-router-dom'
export default function register() {
    let [account,setAccount] = useState("");
    let [pass,setPass] = useState("");
    let [phone,setPhone] = useState("");
    let [email,setEmail] = useState("");
    let navigate = useNavigate();

    const registerFn = (account,pass,phone,email)=>{
        if(account != "" && pass != "" && phone != "" && email != ""){
            localStorage.setItem("account",account);
            localStorage.setItem("pass",pass);
            localStorage.setItem("phone",phone);
            localStorage.setItem("email",email);
            alert("注册成功！")
            navigate("/login")
        }
        else{
            alert("账号或密码为空，注册失败！");
        }
    }

    return (
        <div className='register'>
            <div className='top'>
                <Link to={`/login`}>
                    <div className='back'></div>
                </Link>
                <h2 className='top-title'>注册</h2>
            </div>
            <div className="bottom">
                <div className='inp-div'>
                    <input className='inp' type="text" placeholder='请输入账号' value={account} onChange={(event)=>{
                        let v = event.currentTarget.value;
                        setAccount(v)
                    }}/>
                </div>
                <div className='inp-div'>
                    <input className='inp' type="text" placeholder='请输入手机号' value={phone} onChange={(event)=>{
                        let v = event.currentTarget.value;
                        setPhone(v)
                    }}/>
                </div>
                <div className='inp-div'>
                    <input className='inp' type="text" placeholder='请输入邮箱' value={email} onChange={(event)=>{
                        let v = event.currentTarget.value;
                        setEmail(v)
                    }}/>
                </div>
                <div className='inp-div'>
                    <input className='inp' type="text" placeholder='请输入密码' value={pass} onChange={(event)=>{
                        let v = event.currentTarget.value;
                        setPass(v)
                    }}/>
                </div>
                <div className='btn-div'>
                    <button className='btn' onClick={()=>{
                        registerFn(account,pass,phone,email);
                    }}>注册</button>
                </div>
                <div className='text-div'>
                    <Link to={`/login`}>
                        <span>登录</span>
                    </Link>
                    <span  onClick={()=>{
                            setAccount("");
                            setPass("");
                        }}>重置</span>
                </div>
            </div>
        </div>
    )
}
